//@ts-nocheck
import React, { useState, useEffect } from "react";
import arrow from "./images/arrow.png";
import ChartBackground from "./images/chart_background.png";
import "./index.less";
import { Tooltip } from "antd";
import classNames from "classnames";

interface Legend {
  title: string;
  color: string;
  type: string;
}

interface Point {
  title: string;
  color?: string;
  x: number;
  y: number;
}

interface IProps {
  /**
   * 图的高度，必须要指定
   */
  height?: number;
  /**
   * 图例是否显示，默认展示
   */
  legendVisible?: boolean;
  alwaysTooltip?: boolean;
  points: Array<Point>;
  legend?: Array<Legend>;
  hoverId?: number;
  choosedId?: number;
  yTitle: string;
  xTitle: string;
  onMouseEnter?: (id: number) => void;
  onMouseLeave?: (id: number) => void;
}

const TwoQuadrantChart: React.FC<IProps> = ({
  height = 320,
  points = [],
  legend = [],
  legendVisible = true,
  choosedId = 0,
  hoverId,
  yTitle,
  xTitle,
  onMouseEnter,
  onMouseLeave,
  alwaysTooltip = true,
}) => {
  const [data, setData] = useState([]);

  const [hoverItemId, setHoverItemId] = useState<string>(null);

  useEffect(() => {
    if (points?.length > 0) {
      setData(points);
    }
  }, [points, choosedId]);

  return (
    <div className="two-quadrant-chart" style={{ height: height }}>
      <div
        className="chart-wrapper"
        style={{
          width: height - 54,
          height: height - 54,
          backgroundImage: `url(${ChartBackground})`,
          backgroundSize: "cover",
        }}
      >
        <div className="horizontal-line" />
        <div className="vertical-line" />
        <div className="chart-bg" />
        <div className="top-tips">
          <span>{xTitle}</span>
          <img src={arrow} alt="" />
        </div>
        <div className="right-tips">
          <img src={arrow} alt="" />
          <span>{yTitle}</span>
        </div>
        <div className="left-scale">
          <span>100</span>
          <span>75</span>
          <span>50</span>
          <span>25</span>
          <span>0</span>
        </div>
        <div className="bottom-scale">
          <span>0</span>
          <span>25</span>
          <span>50</span>
          <span>75</span>
          <span>100</span>
        </div>
        {data.map((item, index) => {
          return (
            <div
              key={index}
              className={classNames({
                active:
                  item.id === hoverId || hoverItemId === `${item.id}_${index}`,
              })}
              onMouseEnter={() => {
                onMouseEnter?.(item.id);
                setHoverItemId(`${item.id}_${index}`);
              }}
              onMouseLeave={() => {
                onMouseLeave?.(item.id);
                setHoverItemId(null);
              }}
            >
              <Tooltip
                placement="top"
                title={<span>{item.title}</span>}
                open={true}
                zIndex={500}
                color="#ffffff"
              >
                <div
                  className="item"
                  style={{
                    left: item.x + "%",
                    top: 100 - item.y + "%",
                    borderColor: item.color ? item.color : "white",
                  }}
                />
              </Tooltip>
            </div>
          );
        })}
      </div>
      {legendVisible && (
        <div className="legend">
          {legend?.map((item) => {
            return (
              <div key={item.color} className="item">
                {item.type === "square" && (
                  <div style={{ background: item.color }} />
                )}
                {item.type === "round" && (
                  <div
                    style={{
                      background: "#F5F7FA",
                      width: 10,
                      height: 10,
                    }}
                  >
                    <div
                      style={{
                        width: 4,
                        height: 4,
                        border: "3px solid",
                        borderColor: item.color,
                        boxSizing: "content-box",
                        borderRadius: "50%",
                      }}
                    />
                  </div>
                )}
                <span>{item.title}</span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};
export default TwoQuadrantChart;
